<script lang="ts" setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { InfoFilled } from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'
import SearchCom from '@/components/SearchCom.vue'
import { getCrpById, getCrpList, updateCrpState } from '@/api/class-api.js'
import { useAuthStore } from '@/stores/auth'
const authStore = useAuthStore()

interface MyItem {
  id: number,
  studentId: string,
  score: number,
  reason: string,
  applyTime: string,
  state: string,
  studentName: string,
  crpItemName: string
}


// 搜索
const searchText = ref('')
const curPage = ref(1)
const total = ref(0)
// 表格
const tableData = ref([])


// 更新数据
const loadData = async () => {
  const { data } = await getCrpList(curPage.value, 10, searchText.value)
  tableData.value = data.list
  total.value = data.total
}
loadData()

// 搜索和添加按钮
const handleSearch = async (text: string) => {
  searchText.value = text
  // 获取表单数据并发送请求
  loadData()
}


// 分页
const handlePagination = async (page: any, size: any) => {
  curPage.value = page
  loadData()
}

const handlePass = async (index: number, row: MyItem) => {
  const { data } = await updateCrpState(row.id, '通过')
  ElMessage.success({
    message: '通过',
    type: 'success',
  })
  loadData()
}

const handleNotPass = async (index: number, row: MyItem) => {
  const res = await updateCrpState(row.id, '不通过')
  ElMessage.success({
    message: '不通过',
    type: 'success',
  })
  loadData()
}

</script>

<template>
  <div class="wrap">
    <!-- 搜索和添加按钮 -->
    <SearchCom @search="(searchText) => handleSearch(searchText)" :addBtn="false"></SearchCom>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="ID" width="50">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column label="学号">
        <template #default="scope">
          {{ scope.row.studentId }}
        </template>
      </el-table-column>

      <el-table-column label="姓名">
        <template #default="scope">
          {{ scope.row.studentName }}
        </template>
      </el-table-column>

      <el-table-column label="培养项目">
        <template #default="scope">
          {{ scope.row.crpItemName }}
        </template>
      </el-table-column>

      <el-table-column label="申请理由">
        <template #default="scope">
          {{ scope.row.reason }}
        </template>
      </el-table-column>

      <el-table-column label="分数">
        <template #default="scope">
          {{ scope.row.score }}
        </template>
      </el-table-column>

      <el-table-column label="申请时间">
        <template #default="scope">
          {{ scope.row.applyTime }}
        </template>
      </el-table-column>


      <el-table-column label="状态">
        <template #default="scope">
          {{ scope.row.state }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button :disabled="scope.row.state === '通过'" size="small" @click="handlePass(scope.$index, scope.row)">
            通过
          </el-button>
          <el-button :disabled="scope.row.state === '不通过'" type="danger" size="small"
            @click="handleNotPass(scope.$index, scope.row)">
            不通过
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <div class="paginationWrap">
      <el-pagination @change="handlePagination" background layout="prev, pager, next" :total="total" />
    </div>
  </div>
</template>

<style scoped>
.paginationWrap {
  padding: 50px;
}
</style>